<template>

  <simple-layout title="我的身份">
  <div class="item_bock head_p">
    <div class="head_img">
      <img :src="userInfo.headIcon"/>
    </div>
    <div class="setting_right" @click.stop="uploadHeadImg">
      <div class="caption">更改头像</div>
    </div>
    <input type="file" accept="image/*" @change="handleFile" class="hiddenInput"/>

    <div>
      <van-button type="default" @click="updateIcon">提交</van-button>
    </div>
  </div>
  </simple-layout>
</template>

<script>
  import SimpleLayout from "../../components/SimpleLayout";
  import UserService from '../../service/user';
  import axios from 'axios';

  export default {
    name: "Login",
    components: {
      //someComponent
      SimpleLayout
    },
    props: {},
    data(){
        return {
          // userInfo: {
          //   headIcon: 'https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=62d46c39067b020818c437b303b099b6/d4628535e5dde7119c3d076aabefce1b9c1661ba.jpg'
          // }

          userInfo: JSON.parse(this.$cookie.get('user')),
          iconFile:null
        }
      },
      methods: {
        // 打开图片上传
        uploadHeadImg: function () {
          this.$el.querySelector('.hiddenInput').click()
        },
        // 将头像显示
        handleFile(e) {
          let $target = e.target || e.srcElement
          this.iconFile = $target.files[0]
          var reader = new FileReader()
          reader.onload = (data) => {
            let res = data.target || data.srcElement
            this.userInfo.headIcon = res.result
          }
          reader.readAsDataURL(this.iconFile)
        },
        updateIcon(){
          // console.log(this.iconFile)
          // const params  = {
          //   file:this.iconFile
          // }
          let data = new FormData()
          data.append('multfile', this.iconFile)
          UserService.updateIcon(data).then(res=>{
            console.log(res);
          })
          // axios.post(`/api/block/v/updateIcon`, params, {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}}).then(res => res.data)
        }
      }
    }
</script>

<style scoped>

  button {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 13%;
    width: 80%;
    border-radius: 15px;
    background: -webkit-linear-gradient(to right, #696BE2, #7B7FEE, #8E93F9); /* Safari 5.1 - 6.0 */
    background: -moz-linear-gradient(to right, #696BE2, #7B7FEE, #8E93F9); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #696BE2, #7B7FEE, #8E93F9); /* 标准的语法 */
    color: #fff;
    height: 52px;
    font-size: 18px;
  }

  .item_bock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height:94px;
    width: 300px;
    padding:0px 24px 0px 38px;
    border-bottom: 1px solid #f7f7f7;
    background: #fff;
  }
  .head_p {
    height:132px;
  }
  .head_img{
    height: 90px;
  }
  .head_img img{
    width:90px;
    height:90px;
    border-radius:50px
  }
  .setting_right{
    display: flex;
    height: 37px;
    justify-content: flex-end;
    align-items: center;
  }
  .hiddenInput{
    display: none;
  }
  .caption {
    color: #8F8F8F;
    font-size: 26px;
    height: 37px;
  }
</style>
